<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>购物系统-首页</title>

    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/common/ms-btn.css}" rel="stylesheet">
    <link th:href="@{/css/ms-common.css}" rel="stylesheet">
    <link th:href="@{/css/ms-index.css}" rel="stylesheet">

</head>
<body>

<nav th:replace="common/topbar::flag(topbar='index')"></nav>

<nav th:replace="common/ms-toast.html"></nav>

<nav th:replace="product/cart.html"></nav>

<div class="container-fluid">
    <div class="row mb-3 mt-3">
        <div class="col-md-3">
            <img class="float-end" src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/logo.png" width="200px" height="100px">
        </div>
        <div class="col-md-7">
            <nav class="ms-nav-search">
                <input id="index-input-search" type="text">
                <button onclick="toSearch()"
                        class="btn btn-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                    </svg>
                    搜索
                </button>

                <!-- 搜索标签的渲染入口 -->
                <ul id="index-ul-search-render-entry" class="list-unstyled list-group list-group-horizontal">
                    <li class="list-group-item">推荐搜索: </li>
                    <li class="list-group-item">电脑 </li>
                    <li class="list-group-item">手机</li>
                </ul>
            </nav>
        </div>
        <div class="col-md-2 align-content-end">
            <button class="btn btn-outline-success" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
                    <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                </svg>
                购物车
            </button>
        </div>
    </div>
</div>

<div class="container">
    <nav>
        <ul class="nav nav-tabs">
            <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">全部商品分类</a>
                <ul class="dropdown-menu">
                    <li><hr class="dropdown-divider"></li>
                </ul>
            </li>
        </ul>
    </nav>
    <!-- 分类栏 -->
    <div class="col-md-12">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
        </div>
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">全部</a></li>
                <li class="breadcrumb-item active" aria-current="page">搜索内容</li>
                <li>&nbsp;&nbsp;共 <span id="index-span-product-sum"></span>件商品</li>
            </ol>
        </nav>
        <ul class="list-group">
            <li class="list-group-item">
                <div>分类</div>
                <!-- 动态渲染入口-->
                <div id="index-category-render-entry">

                </div>
            </li>
<!--            <li class="list-group-item">-->
<!--                <div>出版社</div>-->
<!--            </li>-->
<!--            <li class="list-group-item">-->
<!--                <div>价格</div>-->
<!--            </li>-->
        </ul>
    </div>
    <!-- 查询条件-->
    <ul class="list-group list-group-horizontal mt-3">
        <li class="list-group-item">综合排序
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
                </svg>
            </a>
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
                </svg>
            </a>
        </li>
        <li class="list-group-item">
            价格
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
                </svg>
            </a>
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
                </svg>
            </a>
        </li>
        <li class="list-group-item">
            销量
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
                </svg>
            </a>
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
                </svg>
            </a>
        </li>
        <li class="list-group-item">
            评价
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
                </svg>
            </a>
            <a href="#" class="link-dark">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
                </svg>
            </a>
        </li>
        <li class="list-group-item">
            ￥<input id="index-search-price-mini" size="5" placeholder="1"> -- ￥<input id="index-search-price-maxi" size="5" placeholder="100">
            <button id="index-btn-search-price" class="btn btn-sm btn-outline-dark">确定范围</button>
        </li>
    </ul>
    <!-- 商品中心 -->
    <div class="container">
        <ul id="index-product-render-entry" class="list-unstyled mt-4 row row-cols-ms-2 row-cols-md-4">
            <!-- 预加载 -->
            <div class="d-flex justify-content-center w-100">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <!-- 一个商品的卡片 -->
            <li class="px-3 mt-3">
                <div class="card" style="height: 350px;">
                    <a href="/product.html?productId=${product['id']}">
                        <img src="${product.img}" class="card-img-top placeholder-wave" width="250px" height="220px">
                    </a>
                    <div class="card-body">
                        <h5 class="card-title placeholder" style="font-size: 0.9rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;">
                            ${product.name}
                        </h5>
                        <p class="card-text placeholder" style="font-size: 0.8rem">商品分类:${product.category.name}</p>
                        <p class="card-text placeholder" style="font-size: 0.8rem">商品价格:<span class="fw-bolder text-danger">￥${product.price}</span></p>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- 分页部分 -->
    <nav id="index-page-render-entry" class="Page navigation mb-0">
        <ul class="pagination mx-auto justify-content-center">
            <li class="page-item disabled">
                <span class="page-link">首页</span>
            </li>
            <li class="page-item disabled">
                <span class="page-link">上一页</span>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item active" aria-current="page">
                <span class="page-link">2</span>
            </li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
                <a class="page-link" href="#">下一页</a>
            </li>
            <li class="page-item disabled">
                <span class="page-link">末页</span>
            </li>
            <li class="align-self-center">
                &nbsp;&nbsp;到第
            </li>
            <li class="align-self-center">
                <input class="input-group" name="pageNum" size="5">
            </li>
            <li class="align-self-center">
                页
            </li>
            <li class="align-self-center">
                <button class="btn btn-outline-dark">确定</button>
            </li>
        </ul>
    </nav>

    <hr>

    <!-- 网站底部 -->
    <div class="text-center">
        <a href="#">联系我们</a>
        <a href="#">加入我们</a>
        <div class="text-center">
            <a href="#">©2022 Mall-System</a>
        </div>
        <div class="text-center">
            <a href="#">备案号: xxxx</a>
        </div>
    </div>
</div>

<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-param.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-topbar.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-index.js}" type="text/javascript"></script>
</body>
</html>